<template>
    <div>
        <x-button @click="show1=true">open</x-button>
        <x-button @click="show2=true">异步关闭</x-button>

        asyncOK
        <x-modal :is-show.sync="show1" title="ok?"  @open="open" @close="close">
            <div>
                hello
            </div>
           <div slot="footer">
             <x-button @click="show1=false">关闭</x-button>
           </div>
        </x-modal>

        <x-modal :is-show.sync="show2" :is-async="true" :before-close="beforeClose" @open="open" @close="close">
          <div slot="title">title</div>
            <div>
                hello
            </div>
           <!-- <div slot="footer">ss</div>-->
        </x-modal>
    </div>
</template>
<script>
export default {
  data() {
    return {
      show1: false,
      show2: false
    };
  },
  methods: {
    beforeClose(action, instance, closeFn) {
      console.log("beforeClose:", action, instance);
      if (action === "confirm") {
        setTimeout(() => {
          closeFn();
        }, 2000);
      } else {
        closeFn();
      }
    },
    open() {
      console.log("open");
    },
    close(action) {
      console.log("close:", action);
    }
  }
};
</script>